<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        
        <ui:define name="title">
             #{ managerCriarTituloDocumento.tituloDocumento.id == null ? 'Cadastrar Títulos e Documentos' : 'Editar Títulos e Documentos' }
        </ui:define>

        <ui:define name="content">
            <h:form id="criarTituloDocumentoForm">

                <p:messages id="criarTituloDocumentoMessages" autoUpdate="true" />
                
                <div class="actions">
                    <div id="buttons">
                        <p:button value="Pesquisar Títulos e Documentos" outcome="pesquisarTituloDocumento.xhtml"
                                  rendered="#{ managerCriarTituloDocumento.tituloDocumento.id == null }"
                                  icon="ui-icon-search" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>
                

                <p:fieldset legend="Dados" id="dadosFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value="#{ managerCriarTituloDocumento.tituloDocumento.numero }"
                                required="true" requiredMessage="Número é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Ato" for="atoTipoAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="atoTipoAutoComplete" value="#{ managerCriarTituloDocumento.tituloDocumento.atoTipo }"
                                    forceSelection="true" dropdown="true" var="atoTipo" itemValue="#{ atoTipo }" 
                                    itemLabel="#{ atoTipo.descricao }" completeMethod="#{ managerCriarTituloDocumento.autocompletarAtoTipo }"
                                    converter="conversoratotipotitulodocumento" minQueryLength="3" required="true" requiredMessage="Tipo do Ato é obrigatório">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@this, :criarTituloDocumentoForm:qualidadeFisicaAutoComplete, :criarTituloDocumentoForm:qualidadeJuridicaAutoComplete"/>
                            </p:autoComplete>
                            </div>
                        
                        <div class="column2">
                            <p:outputLabel value="Data" for="dataAtoCalendar" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataAtoCalendar" value="#{ managerCriarTituloDocumento.tituloDocumento.data }"
                                showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" required="true"
                                requiredMessage="Data é obrigatório" />
                        </div>                        
                    
                        </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Livro" for="livroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroInputText" value="#{ managerCriarTituloDocumento.tituloDocumento.livro }"
                                required="true" requiredMessage="Livro é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Livro" for="livroComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroComplementoInputText" value="#{ managerCriarTituloDocumento.tituloDocumento.livroComplemento }" />
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Folha" for="folhaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaInputText" value="#{ managerCriarTituloDocumento.tituloDocumento.folha }"
                                required="true" requiredMessage="Folha é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Folha" for="folhaComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaComplementoInputText" value="#{ managerCriarTituloDocumento.tituloDocumento.folhaComplemento }" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Objeto" for="objetoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="objetoInputTextarea" value="#{ managerCriarTituloDocumento.tituloDocumento.objeto }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Observação" for="observacaoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="observacaoInputTextarea" value="#{ managerCriarTituloDocumento.tituloDocumento.observacao }" />
                        </div>
                    </div>
                    
                </p:fieldset>

                <p:fieldset legend="Partes" id="partesFieldset">
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Pessoa" for="tipoPessoaSelectOneMenu" />
                        </div>                        
                        <div class="column10">
                            <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerCriarTituloDocumento.parte.pessoa.tipoPessoa }">
                                <f:selectItems value="#{ enums.tiposPessoa() }" />
                                <p:ajax event="change" update="partesFieldset" oncomplete="widthFix();" />
                            </p:selectOneRadio>
                        </div>
                    </div>
                    
                    <p:panel styleClass="column12 noborder" rendered="#{ managerCriarTituloDocumento.parte.pessoa.tipoPessoa eq 'FISICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CPF" for="cpfInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cpfInputMask" value="#{ managerCriarTituloDocumento.parte.pessoa.cpf  }"
                                    mask="999.999.999-99" />
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome" for="nomeInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="nomeInputText" value="#{ managerCriarTituloDocumento.parte.pessoa.nome }"
                                    required="true" requiredMessage="Nome é obrigatório" />
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="RG" for="rgInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="rgInputText" value="#{ managerCriarTituloDocumento.parte.pessoa.rg  }" />
                            </div>
                            
                            <div class="column2">
                                <p:outputLabel value="Orgão emissor" for="orgaoEmissorInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="orgaoEmissorInputText" value="#{ managerCriarTituloDocumento.parte.pessoa.orgaoEmissor  }" />
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Data de Nascimento" for="dataNascimentoCalendar" />
                            </div>
                            <div class="column3">
                                <p:calendar id="dataNascimentoCalendar" value="#{ managerCriarTituloDocumento.parte.pessoa.dataNascimento }"
                                    showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" />
                            </div>
                            
                            <div class="column2">
                                <p:outputLabel value="Qualidade" for="qualidadeFisicaAutoComplete" />
                            </div>
                            <div class="column3">
                                <p:autoComplete id="qualidadeFisicaAutoComplete" value="#{ managerCriarTituloDocumento.parte.qualidadeTituloDocumento }"
                                    disabled="#{ managerCriarTituloDocumento.tituloDocumento.atoTipo == null ? true : false }"
                                    forceSelection="true" dropdown="true" var="qualidade" itemValue="#{ qualidade }" 
                                    itemLabel="#{ qualidade.descricao }" completeMethod="#{ managerCriarTituloDocumento.autocompletarQualidade }"
                                    converter="conversorqualidadetitulodocumento" minQueryLength="3"
                                    required="true" requiredMessage="Qualidade é obrigatório" />
                            </div>                            
                        </div>
                    </p:panel>

                    <p:panel styleClass="column12 noborder" rendered="#{ managerCriarTituloDocumento.parte.pessoa.tipoPessoa eq 'JURIDICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cnpjInputMask" value="#{ managerCriarTituloDocumento.parte.pessoa.cnpj  }" mask="99.999.999/9999-99" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="nomeFantasiaInputText" value="#{ managerCriarTituloDocumento.parte.pessoa.nome }"
                                    required="true" requiredMessage="Nome Fantasia é obrigatório" />
                            </div>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Qualidade" for="qualidadeJuridicaAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="qualidadeJuridicaAutoComplete" value="#{ managerCriarTituloDocumento.parte.qualidadeTituloDocumento }"
                                disabled="#{ managerCriarTituloDocumento.tituloDocumento.atoTipo == null ? true : false }"
                                forceSelection="true" dropdown="true" var="qualidade" itemValue="#{ qualidade }" 
                                itemLabel="#{ qualidade.descricao }" completeMethod="#{ managerCriarTituloDocumento.autocompletarQualidade }"
                                converter="conversorqualidadetitulodocumento" minQueryLength="3"
                                required="true" requiredMessage="Qualidade é obrigatório" />
                        </div>
                    </p:panel>
                    
                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarTituloDocumento.adicionarParte() }" update="criarTituloDocumentoForm:partesFieldset"
                            icon="ui-icon-plus" process="criarTituloDocumentoForm:partesFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update="criarTituloDocumentoForm:partesFieldset" process="@this, criarTituloDocumentoForm:partesFieldset" icon="ui-icon-close"
                            actionListener="#{ managerCriarTituloDocumento.limparParte() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="partesDataTable" value="#{ managerCriarTituloDocumento.partes }" var="parte"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhuma parte adicionada">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarTituloDocumento.editarParte(parte) }"
                                    process="@this" update=":criarTituloDocumentoForm:partesFieldset" oncomplete="widthFix();" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarTituloDocumento.removerParte(parte) }"
                                    process="@this" update="partesDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Nome" width="50%">
                            <h:outputText value="#{ parte.pessoa.nome }" />
                        </p:column>
                        <p:column headerText="Documento" width="20%">
                            <h:outputText value="#{ parte.pessoa.tipoPessoa eq 'FISICA' ? managerCriarTituloDocumento.adicionarMascaraCPF(parte.pessoa.cpf) : managerCriarTituloDocumento.adicionarMascaraCNPJ(parte.pessoa.cnpj) }" />
                        </p:column>
                        <p:column headerText="Qualidade" width="25%">
                            <h:outputText value="#{ parte.qualidade.descricao }" />
                        </p:column>
                    </p:dataTable>
                    
                </p:fieldset>                
                
                <p:fieldset legend="Selos" id="selosEPFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroSeloInputText" value="#{ managerCriarTituloDocumento.seloEP.numero }"
                                required="true" requiredMessage="Número é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Série" for="serieSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="serieSeloInputText" value="#{ managerCriarTituloDocumento.seloEP.serie }"
                                required="true" requiredMessage="Série é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerCriarTituloDocumento.seloEP.tipoSelo }"
                                    forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                    itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerCriarTituloDocumento.autocompletarTipoSelo }"
                                    converter="conversortiposelo" minQueryLength="3"
                                    required="true" requiredMessage="Tipo do Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>
                        </div>
                    </div>
                    
                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarTituloDocumento.adicionarSeloEP() }" update="criarTituloDocumentoForm:selosEPFieldset"
                            icon="ui-icon-plus" process="criarTituloDocumentoForm:selosEPFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update="criarTituloDocumentoForm:selosEPFieldset" process="@this, criarTituloDocumentoForm:selosEPFieldset" icon="ui-icon-close"
                            actionListener="#{ managerCriarTituloDocumento.limparSeloEP() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="selosEPDataTable" value="#{ managerCriarTituloDocumento.selosEP }" var="seloEP"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum selo adicionado">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarTituloDocumento.editarSeloEP(seloEP) }"
                                    process="@this" update=":criarTituloDocumentoForm:selosEPFieldset" oncomplete="widthFix();" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarTituloDocumento.removerSeloEP(seloEP) }"
                                    process="@this" update="selosEPDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Número" width="30%">
                            <h:outputText value="#{ seloEP.numero }" />
                        </p:column>
                        <p:column headerText="Série" width="30%">
                            <h:outputText value="#{ seloEP.serie }" />
                        </p:column>
                        <p:column headerText="Tipo" width="35%">
                            <h:outputText value="#{ seloEP.tipoSelo.nome }" />
                        </p:column>
                    </p:dataTable>
                    
                </p:fieldset>                
                
                <p:fieldset legend="Anexos" id="anexosFieldset">

                    <p:fileUpload
                        auto="true"
                        mode="advanced"
                        label="Anexar"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        fileUploadListener="#{ managerCriarTituloDocumento.adicionarAnexo }"
                        multiple="true"
                        allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|xls|xlsx|pdf|)$/"
                        dragDropSupport="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        process="@this"
                        update="@this, :criarTituloDocumentoForm:anexosFieldset" />

                    <ui:repeat value="#{ managerCriarTituloDocumento.anexos }" var="anexo">
                        <p:panel styleClass="thumbnail">
                             <p:commandButton id="removeButton" alt="Remover" 
                                process="@this" styleClass="ui-button-only ui-priority-primary button-remove"
                                icon="ui-icon-trash" update=":criarTituloDocumentoForm:anexosFieldset"
                                actionListener="#{ managerCriarTituloDocumento.removerAnexo(anexo) }" />
                             
                            <h:outputLink
                                value="#{ anexo.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show' }" title="#{ anexo.nomeExibicao }"  target="_blank">

                                <p:graphicImage rendered="#{ managerImagem.imagem(anexo) }"
                                                url="#{ managerImagem.urlThumbnailImagem(anexo) }" />
                                <p:outputLabel styleClass="nome_anexo" value="#{ managerImagem.nomeAnexo(anexo) }"
                                                rendered="#{ managerImagem.imagem(anexo) }"/>
                                <p:graphicImage height="100" width="100" rendered="#{ managerImagem.PDF(anexo) }" 
                                                url="#{ managerImagem.urlPDF }" />
                                <p:outputLabel value="#{ managerImagem.nomeAnexoPdf(anexo) }" 
                                                rendered="#{ managerImagem.PDF(anexo) }"/>
                                <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(anexo) }"/>

                            </h:outputLink>
                           
                        </p:panel>
                    </ui:repeat>

                </p:fieldset>

                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarTituloDocumento.salvar() }" value="Salvar"
                        styleClass="ui-priority-primary" update="@form" oncomplete="widthFix();"
                        process="@this, :criarTituloDocumentoForm:dadosFieldset, :criarTituloDocumentoForm:partesDataTable, :criarTituloDocumentoForm:selosEPDataTable, :criarTituloDocumentoForm:anexosFieldset"
                        icon="ui-icon-disk" onclick="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarTituloDocumento.xhtml" />
                </div>
                
            </h:form>

        </ui:define>
    </ui:composition>

</html>